import React from 'react';
import { Table, Divider, Row, Col, Input, Button, Spin, message, Popconfirm } from 'antd';
import styles from "./data.css";
import $ from "jquery";
import { connect } from 'dva';
import DataDetail from "./dataDetail";

class DATA extends React.Component {
  componentDidMount() {
    this.loadData();
  }
  state = {
    dataSource: [],
    visible: false,
    data: {}
  }
  pageSet = {
    defaultCurrent: 1,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
    position: "bottom",
    pageSize: 10,
    //hideOnSinglePage: true,//只有一页时隐藏分页器
    pageSizeOptions: ['10', '20', '50', '100']
  };
  loadData = () => {
    this.props.dispatch({
      type: 'data/query',
      data: {
        CPYW: $("#CPYW").val(),
        PROBLEMTYPE: $("#PROBLEMTYPE").val(),
        PROBLEMTYPESUB: $("#PROBLEMTYPESUB").val(),
        FLAWCode: $("#FLAWCode").val(),
      }
    })
  }

  delete = ID => {
    this.props.dispatch({
      type: 'data/delete',
      data: {
        ID: ID
      },
    }).then((res) => {
      if (res.RESULT) {
        this.loadData();
        message.success("Successful");
      } else {
        message.error("删除失败")
      }
    });
  }

  showModel(bool, data = {}) {
    if (bool) {
      this.setState({ data, visible: bool });
    } else {
      this.setState({ visible: bool });
    }
  }

  columns = [{ title: 'CPYW', dataIndex: 'CPYW' },
  { title: 'PROBLEMTYPE', dataIndex: 'PROBLEMTYPE' },
  { title: 'PROBLEMTYPESUB', dataIndex: 'PROBLEMTYPESUB' },
  { title: 'FLAWCode', dataIndex: 'FLAWCode' },
  {
    title: 'Action', dataIndex: 'ID', render: (text, record, index) => (
      <span>
        <Button onClick={this.showModel.bind(this, true, record)}>Update</Button>
        <Divider type="vertical" />
        <Popconfirm title="Are you sure delete?" onConfirm={this.delete.bind(this, text)} okText="Yes" cancelText="No">
          <Button>Delete</Button>
        </Popconfirm>
      </span>
    ),
  }];

  render() {
    return (
      <Spin spinning={!!this.props.loading.models.data}>
        <div>
          <Row style={{ margin: "10px 0" }}>
            <Col span={2} style={{ textAlign: "right", marginTop: "5px" }}>CPYW：</Col>
            <Col span={4}><Input id="CPYW" /></Col>
            <Col span={2} style={{ textAlign: "right", marginTop: "5px" }}>PROBLEMTYPE：</Col>
            <Col span={4}><Input id="PROBLEMTYPE" /></Col>
            <Col span={2} style={{ textAlign: "right", marginTop: "5px" }}>PROBLEMTYPESUB：</Col>
            <Col span={4}><Input id="PROBLEMTYPESUB" /></Col>
            <Col span={2} style={{ textAlign: "right", marginTop: "5px" }}>FLAWCode：</Col>
            <Col span={4}><Input id="FLAWCode" /></Col>
          </Row>
          <div style={{ textAlign: "center" }}>
            <Button onClick={this.loadData.bind(this)} className={styles.button} type="primary">Query</Button>
            <Button className={styles.button} type="primary">Export</Button>
          </div>
          <Button onClick={this.showModel.bind(this, true)} type="primary" style={{ marginBottom: 16, width: "100px" }}>
            Add
        </Button>
          <Table rowKey="ID" bordered={true} columns={this.columns} pagination={this.pageSet} dataSource={this.props.data.dataSource} />
          <DataDetail
            loadData={this.loadData.bind(this)}
            visible={this.state.visible}
            data={this.state.data}
            showModel={this.showModel.bind(this)} />
        </div>
      </Spin>
    )
  }
}

export default connect(
  ({ loading, routing, data }) => {
    return {
      loading, routing, data
    };
  })(DATA);
